<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-select
        v-model="value"
        filterable
        placeholder="请选择文章"
        :remote-method="getFilters"
        :loading="loading"
        remote
        reserve-keyword
        class="mrb10"
      >
        <el-option
          v-for="item in options"
          :key="item.key"
          :label="item.value"
          :value="item.key"
        ></el-option>
      </el-select>
      <el-input
        v-model="pagination.createBy"
        placeholder="评论人"
        class="handle-input mrb10"
      ></el-input>
      <el-button type="primary" icon="el-icon-search" @click="searchComments()" style="margin-left: 10px">搜索</el-button>
      <el-button type="danger" @click="clearSearch()">清除参数</el-button>
    </div>
    <el-table
      :data="comments"
      border
      class="table"
      header-cell-class-name="table-header"
    >
      <el-table-column
        prop="articleTitle"
        label="文章标题"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="createBy"
        label="发表用户"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="likeCount"
        label="点赞数"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="dislikeCount"
        label="踩数"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="commentContent"
        label="评论内容"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="评论时间"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-delete"
            style="color: var(--orangeRed)"
            @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :current-page="pagination.current"
        :page-size="pagination.size"
        :total="pagination.total"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pagination: {
        current: 1,
        size: 10,
        total: 0,
        createBy: null,
        articleId: null,
      },
      comments: [],
      options: [],
      loading: false,
      value: "",
    };
  },

  computed: {},
  watch: {},
  mounted() {
    this.getComments();
  },

  methods: {
    clearSearch() {
      this.pagination = {
        current: 1,
        size: 10,
        total: 0,
        createBy: null,
        articleId: null,
      };
      this.getComments();
    },
    getComments() {
      this.$createHttp.commentPage(this.pagination).then((res) => {
        if (res.code === 200) {
          this.comments = res.data.records;
          this.pagination.total = res.data.total;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    handlePageChange(val) {
      this.pagination.current = val;
      this.getComments();
    },
    searchComments() {
      this.pagination.total = 0;
      this.pagination.current = 1;
      this.getComments();
    },
    handleDelete(id) {
      this.$confirm(
        "删除评论后，所有该评论的回复均不可见。确认删除？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          center: true,
        }
      )
        .then(() => {
          this.$createHttp.commentDelete({id: id}).then((res) => {
            if (res.code === 200) {
              this.pagination.current = 1;
              this.getComments();
              this.$message({
                message: "删除成功！",
                type: "success",
              });
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "success",
            message: "已取消删除!",
          });
        });
    },

    getFilters(option) {
      let param = {
        title: option,
      };
      this.$createHttp.articleSelect(param).then((res) => {
        if (res.code === 200) {
          this.options = res.data;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.pagination {
  margin: 20px 0;
  text-align: right;
}

.my-input >>> input::-webkit-inner-spin-button {
  appearance: none;
}

.handle-input {
  width: 160px;
  display: inline-block;
}

.mrb10 {
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>
